<template>
<div id="table">
    <el-row class="row1">
        <el-col :span="24">
            <div class="grid-content1 bg-purple-dark">
                <el-input placeholder="请输入内容" v-model="input2" class="search">
                    <i slot="prefix" class="el-input__icon el-icon-close" @click="chongzhi"></i>
                    <template slot="append">
                        <el-button type="primary" @click="search" class="button">搜索</el-button>
                    </template>
                </el-input>
                <ul class="myul">
                    <li>
                        {{ all }}
                        <span>全部</span>
                    </li>
                    <li>
                        {{ user }}
                        <span>用餐</span>
                    </li>
                    <li>
                        {{ empty }}
                        <span>空闲</span>
                    </li>
                    <!-- <li v-show="true">
              {{ oder }}
              <span>预定</span>
            </li>-->
                </ul>
                <el-button type="primary" class="addTable" icon="el-icon-plus" @click="add">新增餐桌</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="20" class="row2">
        <el-col :span="6" v-for="item in fenye" :key="item.id">
            <!-- 被占用的餐桌 -->
            <div class="grid-content used" v-if="item.food_table_action == 1">
                <!-- 结账状态 -->
                <div class="jiezhang">
                    <img v-if="item.food_table_account == 0" @click="tiaozhuan1(item.id)" width="50px" src="../assets/images/1.png" alt />
                    <img v-else src width="50px" alt />
                </div>

                <p class="p1">
                    {{ item.food_table_number }}
                    <span id="span1">桌</span>
                </p>
                <p class="p2">用餐人数：{{ item.food_table_peoples }}人</p>
                <p class="p2">适用人数：{{ item.food_table_seat }}人</p>
                <p class="p3">已上菜:5道</p>
                <p class="p4">未上菜:12道</p>
                <p class="p5">开台时间:{{ item.food_table_usingTime }}</p>
                <el-button type="primary" icon="el-icon-plus" circle @click="tiaozhuan(item)"></el-button>
                <el-button type="primary" icon="el-icon-edit" circle @click="edit(item)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="delData(item.id)"></el-button>
                <!-- 设置餐桌类型 -->
                <p v-if="item.food_table_type == '包间'" class="iconfont icon-fangjian1 iconP"></p>
                <p v-else class="iconfont icon-banshidating iconP1"></p>
            </div>
            <!-- 没有被占用的餐桌 -->
            <div class="grid-content empty" v-else>
                <p class="p1">
                    {{ item.food_table_number }}
                    <span id="span1">桌</span>
                </p>
                <p class="p2 emptyP2">适用人数：{{ item.food_table_seat }}人</p>
                <el-button @click="edit(item)" type="primary" icon="el-icon-edit" circle class="nozhanyong"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle class="nozhanyong" @click="delData(item.id)"></el-button>
                <p v-if="item.food_table_type == '包间'" class="iconfont icon-fangjian1 iconP"></p>
                <p v-else class="iconfont icon-banshidating iconP1"></p>
            </div>
        </el-col>
        <!-- 分页 -->
    </el-row>
    <el-row :gutter="20" class="footrow">
        <el-col :span="24" class="footcol">
            <div class="grid-content3 footbg-purple">
                <el-switch v-model="fenyevalue"></el-switch>
                <el-pagination :hide-on-single-page="fenyevalue" :total="MytableDadta.length" :current-page="nowpage" layout="prev, pager, next" :page-size="4" @current-change="changepage"></el-pagination>
            </div>
        </el-col>
    </el-row>

    <!-- 新增 -->
    <Adddialog title="新增餐桌信息" :state="addTableMsg" @quxiaotankuang="quxiao" @shuaxin="getTableData" :myfrom="addForm" @noAdd="quxiaoAdd"></Adddialog>
    <!-- 修改 -->
    <Mydialog title="修改餐桌信息" :state="dialogFormVisible" @shuaxin="getTableData" @noEdit="quxiao" :myfrom="form"></Mydialog>
</div>
</template>

<script>
import * as api from "../utils/api";
import "../assets/font_table/iconfont.css";
import Mydialog from "../components/Mydialog";
import Adddialog from "../components/Adddialog";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
export default {
    name: "Table",
    components: {
        Mydialog,
        Adddialog,
    },
    data() {
        return {
            input2: "",
            MytableDadta: [],
            nowpage: 1,
            all: 0,
            user: 0,
            empty: 0,
            isused: false,
            dialogFormVisible: false,
            addTableMsg: false,
            formLabelWidth: "120px",
            form: {
                id: "",
                food_table_number: "",
                food_table_action: "",
                food_table_seat: "",
                food_table_usingTime: "",
                food_table_type: "",
                food_table_peoples: "",
                food_table_account: "",
            },
            /* 新增数据 */
            addForm: {
                food_table_number: "",
                food_table_action: "",
                food_table_seat: "",
                food_table_usingTime: "",
                food_table_type: "",
                food_table_peoples: "",
                food_table_account: "",
            },
            /* 分页 */
            fenyevalue: true,
        };
    },
    methods: {
        /* 重置 */
        chongzhi() {
            this.input2 = "";
            this.getTableData();
        },
        /* 查询 */
        search() {
            // console.log()
            let food_table_number = this.input2;
            this.axios({
                method: "get",
                url: api.SELECT_TABLENUMBER,
                params: {
                    food_table_number,
                },
            }).then((data) => {
                console.log(data);
                if (data.data.code == 200) {
                    this.MytableDadta = data.data.data;
                }
            });
        },
        /* 获取数据 */
        getTableData() {
            this.axios({
                url: api.GET_TABLE,
                method: "get",
            }).then((data) => {
                console.log(data);
                this.MytableDadta = data.data.data;
                this.all = this.MytableDadta.length;
                this.MytableDadta.forEach((item, i) => {
                    if (item.food_table_action == 1) {
                        this.user++;
                    } else {
                        this.empty++;
                    }
                });
            });
        },
        /* 跳转到点菜页面 */
        tiaozhuan(id) {
            this.$router.push({
                // path: `/oder/${id}`,
                path: "/oder",
                query: {
                    id: id,
                },
            });
        },
        tiaozhuan1(id) {
            this.$router.push({
                path: `/cashier/${id}`,
            });
        },
        /* 删除 */
        delData(id) {
            // console.log(id)
            this.$confirm("您正在删除一条数据，是否继续？", "确认删除", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "确认删除",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    this.axios({
                        method: "post",
                        url: api.DEL_TABLE,
                        data: {
                            id,
                        },
                    }).then((data) => {
                        if (data.data.code == 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功",
                            });
                            this.getTableData();
                        } else {
                            this.$message({
                                type: "info",
                                message: "删除失败",
                            });
                        }
                    });
                })
                .catch((action) => {
                    this.$message({
                        type: "info",
                        message: action === "cancel" ? "取消删除" : "",
                    });
                });
        },
        /* 新增 */
        add() {
            this.addTableMsg = true;
        },
        /* 修改 */
        edit(item) {
            // console.log(item.food_table_action)
            this.dialogFormVisible = true;
            this.form.id = item.id;
            this.form.food_table_number = item.food_table_number;
            this.form.food_table_seat = item.food_table_seat;
            this.form.food_table_usingTime = item.food_table_usingTime;
            this.form.food_table_type = item.food_table_type;
            this.form.food_table_peoples = item.food_table_peoples;

            if (item.food_table_action == 1) {
                this.form.food_table_action = "已使用";
            } else {
                this.form.food_table_action = "未使用";
            }
            if (item.food_table_account == 1) {
                this.form.food_table_account = "已结账";
            } else {
                this.form.food_table_account = "未结账";
            }
        },
        /* 取消 */
        quxiao() {
            this.dialogFormVisible = false;
        },
        quxiaoAdd() {
            this.addTableMsg = false;
        },
        /* 分页 */
        changepage(val) {
            console.log(val);
            this.nowpage = val;
        },
    },

    computed: {
        fenye() {
            let start = (this.nowpage - 1) * 4;
            let end = start + 4;
            let elTableData = this.MytableDadta.slice(start, end);
            return elTableData;
        },
    },

    created() {
        this.getTableData();
    },
};
</script>

<style lang="less" scoped>
.nozhanyong {
    margin-top: 25px;
}

.jiezhang {
    position: absolute;
    left: 230px;
    top: 100px;
}

.success {
    color: rgb(42, 253, 14);
}

.shibai {
    color: #e5e9f2;
    color: red;
}

.jiezhang>span {
    font-size: 23px;
}

.iconP {
    color: #ffffff;
    display: block;
    margin-top: 25px;
    font-size: 20px;
}

.iconP1 {
    color: #dd9222;
    margin-top: 25px;
    font-size: 20px;
}

.addTable {
    margin-top: 30px;
}

.p1 {
    padding-top: 25px;
    font-weight: bolder;
    font-size: 26px;
    cursor: pointer;
    color: #000000;
}

.p11 {
    padding-top: 45px;
    font-weight: bolder;
    font-size: 26px;
    cursor: pointer;
    color: #000000;
}

#span1 {
    font-weight: lighter;
    font-size: 14px;
}

.p2 {
    font-weight: lighter;
    font-size: 12px;
    color: #000000;
}

.p3 {
    font-weight: lighter;
    font-size: 12px;
    margin-top: 10px;
    color: #000000;
}

.p4 {
    font-weight: lighter;
    font-size: 12px;
    color: #000000;
}

.p5 {
    font-weight: lighter;
    font-size: 12px;
    margin-bottom: 10px;
    color: #000000;
}

.emptyP2 {
    margin: 50px 0;
}

#table {
    margin-top: 10px;
}

.el-row {
    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 25px;
    margin-bottom: 15px;
}

.bg-purple-dark {
    background: #ffffff;
}

.used {
    background: -webkit-linear-gradient(rgba(252, 203, 203, 0.3),
            rgba(252, 203, 203, 1));
    position: relative;
}

.empty {
    background: -webkit-linear-gradient(rgba(173, 157, 157, 0.3),
            rgba(173, 157, 157, 1));
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    margin-top: 20px;
    line-height: 25px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 150px;
}

.grid-content1 {
    min-height: 100px;
}

.row-bg {
    background-color: #f9fafc;
}

.row2 {
    background-color: #f8f9fb;
    margin-top: -14.5px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 400px;
}

.row1 {
    border-bottom: 1px solid#C1C1C1;
}

.myul {
    display: block;
    margin: 0px auto;
    width: 320px;
    background-color: pink;
    height: 100%;
    text-align: center;
}

.myul>li {
    list-style: none;
    float: left;
    width: 80px;
    height: 60px;
    font-weight: bolder;
    font-size: 24px;
    margin-top: 30px;
    cursor: pointer;
}

.myul>li>span {
    font-weight: lighter;
    font-size: 12px;
    display: block;
}

/* foot */
.footrow {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.footcol {
    border-radius: 4px;
}

.footbg-purple {
    background: #f8f9fb;
}

.grid-content3 {
    border-radius: 4px;
    min-height: 150px;
    margin-top: -10px;
}

/* 搜索 */
.search {
    width: 400px;
    float: left;
    margin-top: 40px;
    margin-left: 10px;
}
</style>
